<template>
  <div class="wrap">
    <div :class="['menuWrap', state.collapsed == false ? 'on' : '']">
      <a-button
        class="menuWidth"
        type="primary"
        style="margin-bottom: 16px"
        @click="toggleCollapsed"
      >
        <MenuUnfoldOutlined v-if="state.collapsed" />
        <MenuFoldOutlined v-else />
      </a-button>
      <div class="menuImg" @click="gobaHome">
        <img v-if="state.collapsed == false" src="@/assets/hmm/3.png" alt="" />
        <img v-else src="@/assets/hmm/4.png" alt="" />
      </div>
      <a-menu
        v-model:openKeys="state.openKeys"
        v-model:selectedKeys="state.selectedKeys"
        mode="inline"
        theme="light"
        :inline-collapsed="state.collapsed"
        class="menuList"
      >
        <template v-for="(item, index) in menuDatas" :key="index">
          <template v-if="item.meta.title && item.children && item.children.length > 0">
            <a-sub-menu>
              <template #title>
                <icon-font v-if="item.meta.icon" :type="item.meta.icon" />
                <span>{{ item.meta.title }}</span>
              </template>
              <a-menu-item
                v-for="(itemTwo, j) in item.children"
                :key="j"
                @click="titleClick(itemTwo)"
              >
                <icon-font v-if="itemTwo.meta.icon" :type="itemTwo.meta.icon" />
                <span>{{ itemTwo.meta.title }}</span>
              </a-menu-item>
              <!-- <template v-for="(itemTwo, j) in menuDatas" :key="j + item.key" v-if="false">
              <a-menu-item>
                <template #title>
                  <icon-font v-if="itemTwo.meta.icon" :type="itemTwo.meta.icon" />
                  {{ itemTwo.meta.title }}
                </template>
              </a-menu-item>
            </template> -->
            </a-sub-menu>
          </template>
          <a-menu-item v-else :key="index" @click="titleClick(item)">
            <!-- <template #title>
              <span>{{ item.meta.title }}</span>
            </template> -->
            <icon-font v-if="item.meta.icon" :type="item.meta.icon" />
            <span>{{ item.meta.title }}</span>
          </a-menu-item>
        </template>
      </a-menu>
    </div>
    <RightContent
      :class="['headerTop', state.collapsed == false ? 'on' : '']"
      :current-user="currentUser"
    />
    <div
      :class="['layout-breadcrumb', state.collapsed == false ? 'on' : '']"
      v-if="router.currentRoute.value.path !== '/home'"
    >
      <a-breadcrumb>
        <a-breadcrumb-item v-for="(route, index) in breadcrumb" :key="route.path">
          <span v-if="router.currentRoute.value.path === route.path">
            <icon-font :type="route.icon" />
            {{ route.breadcrumbName }}
          </span>
          <router-link v-else :to="{ path: route.path }">
            <SmileOutlined />
            {{ route.breadcrumbName }}
          </router-link>
        </a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <RouterView
      :class="[
        'layout-content',
        state.collapsed == false ? 'on' : '',
        router.currentRoute.value.path != '/home' ? 'hidee' : 'showw'
      ]"
      :style="layoutContentStyle"
      v-slot="{ Component, route }"
    >
      <Transition name="page" mode="out-in">
        <keep-alive :include="Array.from(store.userApp.keepAliveRoutes)">
          <component :is="Component" :key="route.path" />
        </keep-alive>
      </Transition>
    </RouterView>
  </div>
</template>

<script setup lang="ts">
import { useRouter, RouterView, RouterLink } from 'vue-router'
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue'
import { SmileOutlined, HeartOutlined } from '@ant-design/icons-vue'
import { ref, reactive, onMounted, watch, computed, h } from 'vue'
import RightContent from './RightContent.vue'

import store from '@/store'
const router = useRouter()
const state = reactive({
  menuWidth: '',
  collapsed: false,
  selectedKeys: [''],
  openKeys: [''],
  preOpenKeys: ['']
})
const menuDatas = computed(() => {
  let menuList = JSON.parse(JSON.stringify(store.userApp.menuList))
  for (let i = 0; i < menuList.length; i++) {
    menuList[i].title = menuList[i].name
    menuList[i].label = menuList[i].name
    if (menuList[i].children && menuList[i].children.length > 0) {
      for (let j = 0; j < menuList[i].children.length; j++) {
        menuList[i].children[j].title = menuList[i].children[j].name
        menuList[i].children[j].label = menuList[i].children[j].name
      }
    }
  }
  return menuList
})
watch(
  router.currentRoute,
  () => {
    if (router.currentRoute._value.path == '/home') {
      state.selectedKeys = []
    } else {
      let menuList = JSON.parse(JSON.stringify(store.userApp.menuList))
      for (let i = 0; i < menuList.length; i++) {
        if (menuList[i].path == router.currentRoute.value.path) {
          state.selectedKeys = []
          state.selectedKeys.push(i)
        }
      }
    }
  },
  {
    immediate: true
  }
)
const titleClick = (item) => {
  router.push({
    path: item.path
  })
}
const gobaHome = () => {
  router.push({
    path: '/home'
  })
}
const toggleCollapsed = () => {
  state.collapsed = !state.collapsed
  state.openKeys = state.collapsed ? [] : state.preOpenKeys
}
const currentUser = reactive({
  nickname: 'Admin',
  avatar: 'A'
})
const breadcrumb = computed(() => {
  return router.currentRoute.value.matched.concat().map((item) => {
    return {
      path: item.path,
      breadcrumbName: item.meta.title || '',
      icon: item.meta.icon
    }
  })
})
const layoutContentStyle = computed(() => {
  if (router.currentRoute.value.name === 'home') {
    return {
      height: 'calc(100vh - 45px)'
    }
  } else {
    return {
      height: 'calc(100vh - 85px)'
    }
  }
})
</script>

<style lang="less" scoped>
.wrap {
  position: relative;
  background: #f0f2f5;
  .menuWrap {
    position: relative;
    height: 100vh;
    background: #fff;
    overflow: auto;
    overflow-x: hidden;
    width: 50px;
    &.on {
      width: 168px;
      :deep(.ant-menu) {
        width: 100%;
      }
      .menuImg {
        img {
          width: 168px;
          height: 48px;
        }
      }
    }
    .menuImg {
      &:hover {
        cursor: pointer;
      }
      img {
        display: block;
        width: 50px;
        height: 48px;
      }
    }
    :deep(.ant-menu) {
      width: 50px;
      .ant-menu-submenu {
        .ant-menu-title-content {
          color: #86909c;
          span {
            &:nth-child(2) {
              margin-left: 16px;
              font-weight: 700;
            }
          }
        }
        .ant-menu-submenu-arrow {
          color: #86909c;
        }
      }
      .ant-menu-item {
        margin: 4px 0;
        .ant-menu-title-content {
          color: #86909c;
          span {
            &:nth-child(2) {
              margin-left: 16px;
              font-weight: 700;
            }
          }
        }
        &.ant-menu-item-selected {
          background: #e8f3ff;
          .ant-menu-title-content {
            color: #165dff;
          }
        }
      }
    }
    .menuWidth {
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 999;
    }
    :deep(.menuList) {
      .ant-menu-item-group-title {
        padding: 0;
      }
    }
  }
  .headerTop {
    position: absolute;
    left: 80px;
    top: 10px;
    width: calc(100% - 80px);
    &.on {
      left: 168px;
      width: calc(100% - 178px);
    }
  }
  .layout-breadcrumb {
    position: absolute;
    top: 45px;
    height: 40px;
    background: #ffffff;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 16px;
    left: 50px;
    width: calc(100% - 50px);
    &.on {
      left: 168px;
      width: calc(100% - 168px);
    }
  }
  .layout-content {
    padding: 16px;
    overflow: hidden;
    position: relative;
    position: absolute;
    top: 85px;
    left: 50px;
    width: calc(100% - 50px);
    &.hidee {
      top: 85px;
    }
    &.showw {
      top: 45px;
    }
    &.on {
      left: 168px;
      width: calc(100% - 168px);
    }
  }
}
</style>
